import { defineStore } from "pinia";
import { ref } from "vue";

import AppConfig from "@/config";
import { MenuThemeEnum } from "@/constants/enums/menuEnum";
import { SystemThemeEnum } from "@/constants/enums/systemEnum";
import type { MenuThemeType } from "@/types/stores/index";
export const useThemeStore = defineStore("themeStore", () => {
  // 主题相关设置
  /** 系统主题类型 */
  const systemThemeType = ref(SystemThemeEnum.AUTO);
  /** 系统主题模式 */
  const systemThemeMode = ref(SystemThemeEnum.AUTO);
  /** 菜单主题类型 */
  const menuThemeType = ref(MenuThemeEnum.DESIGN);
  /** 系统主题颜色 */
  const systemThemeColor = ref(AppConfig.elementPlusTheme.primary);

  /**
   * 判断是否为暗色模式
   */
  const isDark = computed((): boolean => {
    return systemThemeType.value === SystemThemeEnum.DARK;
  });

  /**
   * 获取菜单主题
   * 根据当前主题类型和暗色模式返回对应的主题配置
   */
  const getMenuTheme = computed((): MenuThemeType => {
    const list = AppConfig.themeList.filter(
      (item) => item.theme === menuThemeType.value
    );
    if (isDark.value) {
      return AppConfig.darkMenuStyles[0];
    } else {
      return list[0];
    }
  });

  /**
   * 设置全局主题
   * @param theme 主题类型
   * @param themeMode 主题模式
   */
  const setGlopTheme = (theme: SystemThemeEnum, themeMode: SystemThemeEnum) => {
    systemThemeType.value = theme;
    systemThemeMode.value = themeMode;
  };

  return {
    menuThemeType,
    systemThemeType,
    systemThemeMode,
    systemThemeColor,
    getMenuTheme,
    isDark,
    setGlopTheme,
  };
});
